<template>
	<view>
		<view class="form re">
			<view class="username">
				<image class="img" src="/static/img/public/account.png" mode="widthFix"></image>
				<input placeholder="请输入手机号码" v-model="phoneNumber" maxlength="11" type="number"  placeholder-style="color: rgba(172,173,174,0.8);"/>
			</view>
			<view class="code">
				<image class="code_img" src="/static/img/public/verificationCode.png" mode="widthFix"></image>
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input placeholder="请输入验证码" v-model="code" :focus="codeFocus" placeholder-style="color: rgba(172,173,174,0.8);"/>
			</view>			
			<!-- <view class="password">
				<input placeholder="请输入密码" v-model="passwd" password=true placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view> -->
			<view class="btn" @tap="toNext">下一步</view>			
			<!-- <view class="res">
				<view @tap="toLogin">已有账号立即登录</view>
			</view> -->
		</view>
		
	</view>
</template>

<script>
	import {mapMutations,mapState} from 'vuex';
	import Api from '@/common/api';
	import store from '@/store/index';
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				phoneNumber:"",
				timestamp:"",
				code:'',
				passwd:"",
				getCodeText:'验证码',
				codeFocus: false, //验证码输入框是否聚焦
				getCodeBtnColor: "#767777",
				getCodeisWaiting:false
			}
		},
		onLoad() {
			this.timestamp = new Date().getTime();
			// console.log(this.timestamp)
		},
		methods: {
			async getCode(){
				// this.logining = true;
				uni.hideKeyboard()
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.codeFocus = true;
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(118, 119, 119,.5)"
				var params = {'mobile': this.phoneNumber};
				let data = await Api.apiCall('post',Api.index.sendCodes,params);
				if(data)
				{
					//示例用定时器模拟请求效果
					setTimeout(() => {
						uni.showToast({
							title: '验证码已发送',
							icon: "success"
						});
						this.setTimer();
					}, 1000)
				}
				else{
					this.getCodeisWaiting = false;
					this.getCodeText = "验证码";
					uni.showToast({
						title: data.error,
						icon: 'none'
					});
				}
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = "60秒"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#767777";
						this.getCodeText = "验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = holdTime + "秒"
					holdTime--;
			
				}, 1000)
			},
			async toNext(){
				var that = this;
				// App用户注册时下一步
				uni.hideKeyboard()
				//模板示例部分验证规则
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				}
				var verify_code = uni.getStorageSync('verify_code')
				//示例验证码，实际使用中应为请求服务器比对验证码是否正确。
				
				// if(this.code!=verify_code){ 
				// 	uni.showToast({title: '验证码不正确',icon:"none"});
				// 	return false; 
				// }
				uni.showLoading({
					title: '提交中...'
				})
				// 手机验证码验证 type: register 注册时验证， forget 忘记密码时验证
				var  str_data = {'mobile': this.phoneNumber,'captcha':this.code, 'type':'forget'};
				var params = {
					'mobile': this.phoneNumber,
					'captcha': this.code,
					'type': 'forget'
				};
				let data = await Api.apiCall('post',Api.index.reg,params);
				if (data) {
					setTimeout(function() {
						uni.navigateTo({
							// url: 'setpasswd?mobile=' + that.phoneNumber,
							url: 'resetpasswd?mobile=' + that.phoneNumber,
						});
					}, 1000)
				}
			},
			toLogin(){ 
				uni.hideKeyboard()
				uni.redirectTo({url: 'login'});
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";
</style>
